<script setup lang="ts">

import {getCurrentInstance} from "vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import BrandPreferenceTab
  from "~/contentScripts/views/sycm/industry_customer/SycmSearchCustomerAttributePortrait/BrandPreferenceTab.vue";
import BrandProductTab
  from "~/contentScripts/views/sycm/industry_customer/SycmSearchCustomerAttributePortrait/BrandProductTab.vue";
import CatePreferenceTab
  from "~/contentScripts/views/sycm/industry_customer/SycmSearchCustomerAttributePortrait/CatePreferenceTab.vue";
import CateProductTab
  from "~/contentScripts/views/sycm/industry_customer/SycmSearchCustomerAttributePortrait/CateProductTab.vue";
import KeywordPreferenceTab
  from "~/contentScripts/views/sycm/industry_customer/SycmSearchCustomerAttributePortrait/KeywordPreferenceTab.vue";
import OrderPlacementPreferencesTab
  from "~/contentScripts/views/sycm/industry_customer/SycmSearchCustomerAttributePortrait/OrderPlacementPreferencesTab.vue";
import PropertyPreferenceTab
  from "~/contentScripts/views/sycm/industry_customer/SycmSearchCustomerAttributePortrait/PropertyPreferenceTab.vue";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import SYCM from "~/utils/ali/sycm";

const date = ref<any>(null);
const loginVisible = ref<Boolean>(false);
const visible = ref<Boolean>(false);
const activeKey = ref<String>('1');
const data = ref<any>(null);
const showZs = ref<Boolean>(false);
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    }
  }, __option)) {
    date.value = document.querySelector(".oui-date-picker-current-date").innerHTML.replaceAll('统计时间', '').replaceAll(' ', '').replaceAll('\n', '').replaceAll('\t', '');
    data.value = await SYCM.getInternalFiberData('#completeShopPurchase > div.oui-card-content > span', 'memoizedProps.children.props')
    console.log(data);
    visible.value = true;
  }
}
</script>

<template>
  <base-app>
    <a-button-group>
      <user style="margin-right: 0;"/>
      <a-button type="primary" size="small" @click="handle">
        一键转化
      </a-button>
    </a-button-group>
    <user-login-modal v-model:login-visible="loginVisible"/>
    <custom-modal width="1200px" style="top: 20px;" title="市场-行业客群-购买偏好" :footer="false"
                  v-model:visible="visible"
    >
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
      </template>
      <a-tabs v-model:active-key="activeKey">
        <a-tab-pane key="1" tab="品牌偏好">
          <BrandPreferenceTab :data="data" :date="date" :show-zs="showZs"/>
        </a-tab-pane>
        <a-tab-pane key="2" tab="品牌偏好-交易商品榜">
          <BrandProductTab :data="data" :date="date" :show-zs="showZs"/>
        </a-tab-pane>
        <a-tab-pane key="3" tab="类目偏好">
          <CatePreferenceTab :data="data" :date="date" :show-zs="showZs"/>
        </a-tab-pane>
        <a-tab-pane key="4" tab="类目偏好-交易商品榜">
          <CateProductTab :data="data" :date="date" :show-zs="showZs"/>
        </a-tab-pane>
        <a-tab-pane key="5" tab="下单及支付时段偏好">
          <OrderPlacementPreferencesTab :data="data" :date="date" :show-zs="showZs"/>
        </a-tab-pane>
        <a-tab-pane key="6" tab="搜索词偏好">
          <KeywordPreferenceTab :data="data" :date="date" :show-zs="showZs"/>
        </a-tab-pane>
        <a-tab-pane key="7" tab="属性偏好">
          <PropertyPreferenceTab :data="data" :date="date" :show-zs="showZs"/>
        </a-tab-pane>
        <template #rightExtra>
          <a-checkbox size="small" v-model:checked="showZs"> 显示指数</a-checkbox>
        </template>
      </a-tabs>
    </custom-modal>
  </base-app>
</template>

<style scoped>

</style>
